Setting up a layout with header and footer

Let's create a layout component that includes our Header and a lazy-loaded Footer:

// src/js/layouts/MainLayout/MainLayout.js
import React from 'react';
import { Outlet } from "@tata1mg/router";
import loadable from '@loadable/component';
import Header from '../../components/Header/Header';

// Lazy load the Footer component
const Footer = loadable(() => import('../../components/Footer/Footer'), {
  fallback: <div>Loading footer...</div>,
  ssr: false
});

const MainLayout = () => {
  return (
    <div>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </div>
  );
};

export default MainLayout;

Create the Header component:

// src/js/components/Header/Header.js
import React from 'react';
import { Link } from '@tata1mg/router';

const Header = () => {
  return (
    <header style={{ 
      background: 'white', 
      padding: '10px 20px', 
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between'
    }}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <img src="/assets/dog-logo.png" alt="Dog Adoption Logo" style={{ height: '40px', marginRight: '10px' }} />
        <h1 style={{ margin: 0, fontSize: '1.5rem' }}>Dog Adoption Center</h1>
      </div>
      <nav>
        <Link to="/" style={{ marginRight: '20px', textDecoration: 'none', color: '#4CAF50' }}>Home</Link>
        <Link to="/about" style={{ textDecoration: 'none', color: '#4CAF50' }}>About</Link>
      </nav>
    </header>
  );
};

export default Header;

Create the Footer component:

// src/js/components/Footer/Footer.js
import React from 'react';

const Footer = () => {
  return (
    <footer style={{ 
      background: '#333', 
      color: 'white', 
      padding: '20px',
      marginTop: '50px',
      textAlign: 'center'
    }}>
      <p>© 2025 Dog Adoption Center. All rights reserved.</p>
      <p>Data provided by <a href="https://dog.ceo/dog-api/" style={{ color: 'white' }}>Dog API</a></p>
      <p>This is a demo application built with Catalyst.</p>
    </footer>
  );
};

export default Footer;

Create an About page:

// src/js/pages/About/About.js
import React from 'react';

const About = () => {
  return (
    <div className="container">
      <h1>About Our Dog Adoption Center</h1>
      <p>We are dedicated to finding loving homes for all dogs in need.</p>
      <p>Our mission is to connect dog lovers with animals looking for a forever home.</p>
      <p>This is a demo application built with Catalyst to showcase server-side rendering capabilities.</p>
      <p>It uses the <a href="https://dog.ceo/dog-api/">Dog API</a> to display information about different dog breeds.</p>
    </div>
  );
};

export default About;

Update the routes in src/js/routes/index.js to use the MainLayout:

import React from 'react';
+ import MainLayout from '../layouts/MainLayout/MainLayout';
import Home from '../pages/Home/Home';
import BreedDetails from '../pages/BreedDetails/BreedDetails';
+ import About from '../pages/About/About';

const routes = [
  {
-   path: "/",
-   index: true,
-   component: Home,
-  },
-  {
-   path: "/breed/:breed",
-   component: BreedDetails,
+   path: "/",
+   component: MainLayout,
+   children: [
+     {
+       path: "",
+       index: true,
+       component: Home,
+     },
+     {
+       path: "breed/:breed",
+       component: BreedDetails,
+     },
+     {
+       path: "about",
+       component: About,
+     }
+   ]
  }
];

export default routes;